<template style="height: 100%;">
  <div style="height: 100%">
    <el-container style="height: 100%">
      <el-aside style="height: 100%; width: auto">
        <i
          :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
          @click="Collapse"
        ></i>
        <el-menu
          default-active="1-4-1"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
        >
          <el-menu-item index="0" @click="to('../Admin/')">
            <i class="el-icon-house"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-menu-item index="1" @click="to('../Admin/User')">
            <i class="el-icon-user"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="2" @click="to('../Admin/System')">
            <i class="el-icon-setting"></i>
            <span slot="title">系统设置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container style="height: 100%; width: auto">
        <el-header style="background-color: gainsboro">
          <div class="header">
            <div
              @click="
                () =>
                  messageVisible
                    ? (messageVisible = false)
                    : (messageVisible = true)
              "
            >
              <el-avatar
                slot="reference"
                :src="userData.headPortrait"
                :size="55"
              ></el-avatar>
            </div>
            <el-popover
              placement="bottom"
              trigger="manual"
              v-model="messageVisible"
              class="message"
            >
              <div class="messageS" @click="message">个人信息</div>
              <div class="messageS" @click="exit">退出登录</div>
            </el-popover>
          </div>
        </el-header>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  min-height: 96%;
  width: 200px;
}
.header {
  position: absolute;
  right: 100px;
}
.message .el-popover {
  min-width: 60px;
}
.messageS {
  height: 25px;
  line-height: 25px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  cursor: pointer;
}
</style>
<script>
import { put, del } from "./util/request";
import { RefreshToken, Exit } from "./config/Login";
import { connectionSignalR } from "./util/signalR";
import Vue from "vue";
export default {
  data() {
    return {
      messageVisible: false,
      isCollapse: true,
      refreshToken: null,
      userData: {
        headPortrait:
          "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        name: "管理员",
      },
    };
  },
  methods: {
    RefreshToken() {
      var This = this;
      this.refreshToken = window.setInterval(() => {
        put(RefreshToken).then((response) => {
          if (response.statusCode != 200) {
            This.$router.push({ path: "../Login/" });
          }
          //刷新token
          console.log("刷新token", response);
        });
      }, 1700000);
    },
    message() {
      var user = JSON.parse(sessionStorage.getItem("user"));
      this.userData.headPortrait = user.headPortrait;
      this.userData.name = user.name;
    },
    exit() {
      connectionSignalR.off("SystemMessage");
      connectionSignalR.off("Message");
      connectionSignalR.stop();
      del(Exit).then((response) => {
        if (response.statusCode == 200) {
          sessionStorage.clear();
          this.$message.success("退出登录成功");
          this.Chat.stop();
        } else {
          this.$message.error("退出登录失败");
        }
        this.$router.push({ path: "../Login/" });
      });
    },
    to(url) {
      this.$router.push({ path: url });
    },
    Collapse() {
      this.isCollapse ? (this.isCollapse = false) : (this.isCollapse = true);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    Hub() {
      var user = JSON.parse(sessionStorage.getItem("user"));
      connectionSignalR.start().then(() => {
        window.connectionSignalR;
      });
      Vue.prototype.Chat = connectionSignalR;
      connectionSignalR.on("Message" + user.id, (data) => {
        console.log(data);
      });
      this.HubSystem();
      connectionSignalR.onclose((error) => {
        console.log("error", error.stack);
      });
    },
    HubSystem() {
      //系统推送
      connectionSignalR.on("SystemMessage", (data) => {
        console.log(data);
      });
    },
    HubOn(id) {
      connectionSignalR.on("Message" + id, (data) => {
        console.log(data);
      });
    },
  },
  created() {
    sessionStorage.setItem("isPower", true);
    var user = JSON.parse(sessionStorage.getItem("user"));
    if (user == null) {
      this.$router.push({ path: "../Login/" });
      return;
    }
    this.RefreshToken();
    this.message();
    this.$router.push({ path: "../Admin/" });
    console.log("user", user);
    this.Hub();
  },
};
</script>
